<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 去除默认样式 设置底色 */
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #222;
        }
        /* 添加渐变背景 */
        body::before{
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(#08ff12,#0791ff);
            z-index: 10;
            pointer-events: none;
            mix-blend-mode: multiply;
        }
        /* 外层圆圈 */
        .circle{
            position: relative;
            width: 500px;
            height: 500px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 50%;
            box-shadow: 0 0 0 2px #fff5,
                        0 0 0 20px #333,
                        0 0 0 22px #fff,
                        0 0 50px #fff,
                        0 0 450px #fff;
        }
        /* 长指针 */
        .circle::before{
            content: "";
            position: absolute;
            width: 2px;
            height: 170px;
            border-radius: 2px;
            background: linear-gradient(0deg,transparent,#fff);
            transform-origin: bottom;
            animation: animateRotate 20s steps(60) infinite;
        }
        /* 短指针 */
        .circle::after{
            content: "";
            position: absolute;
            width: 4px;
            height: 130px;
            border-radius: 2px;
            background: linear-gradient(0deg,transparent,#fff);
            transform-origin: bottom;
            animation: animateRotate 120s steps(60) infinite;
        }
        /* 动画 */
        @keyframes animateRotate{
            0% {
                transform: translate(-50%,-50%) rotate(0deg);
            }
            100%{
                transform: translate(-50%,-50%) rotate(360deg);
            }
        }
        /* 内容 */
        ul li {
            position: absolute;
            top: 10px;
            list-style: none;
            transform-origin: 0 240px;
            transform: rotate(calc(21deg*var(--i)));
            font-size: 2.5em;
            font-weight: 700;
            text-transform: uppercase;
            font-family:黑体;
        }
        /* 内容样式 */
        ul li span {
            display: inline-block;
            color: #fff;
            transform: rotate(calc(-21deg*var(--i)));
            text-shadow: 0 0 15px #fff,
                         0 0 35px #fff,
                         0 0 75px #fff,
                         0 0 150px #fff;
        }
    </style>
</head>
<body>
    <!-- 结构 -->
    <div class="circle">
        <ul>
            <li style="--i:-4"><span>♣</span></li>
            <li style="--i:-3"><span>☯</span></li>
            <li style="--i:-2"><span>♕</span></li>
            <li style="--i:-1"><span>x</span></li>
            <li style="--i:0"><span>y</span></li>
            <li style="--i:1"><span>g</span></li>
            <li style="--i:2"><span>♫</span></li>
            <li style="--i:3"><span>❀</span></li>
            <li style="--i:4"><span>☣</span></li>
            <li style="--i:5"><span>❤</span></li>
            <li style="--i:6"><span>❦</span></li>
            <li style="--i:7"><span>✡</span></li>
            <li style="--i:8"><span>♨</span></li>
            <li style="--i:9"><span>ღ</span></li>
            <li style="--i:10"><span>☃</span></li>
            <li style="--i:11"><span>☪</span></li>
            <li style="--i:12"><span>♤</span></li>
        </ul>
    </div>
</body>
</html>